<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>

    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="row">
    <div data-widget="indexHead"></div>
</div>
<div class="account-con p-xl" style="height: auto">
    <form data-form="account" style="position: relative">
        <input type="hidden" name="userId">
        <div class="account-row">
            <p class="mt-45">
                <span>头像</span>
                <span class="c-909399">仅支持图片格式，文件大小 1M (方形图)</span>
            </p>

            <div class="photo-up" data-widget="upload">
                <input type="hidden" name="avatarUrl" data-type="image">
                <span>
					<i class="iconfont bi-plus-lg"></i>
					<span style="display: block">上传新图片</span>
				</span>
            </div>

            <p class="account-input mt-20 clearfix">
                <span>姓名</span>
                <span class="login-tel">
					<input type="text" name="userName" placeholder="请输入姓名"/>
				</span>
            </p>

            <p class="account-input mt-20 clearfix">
                <span>性别</span>
                <span class="login-tel" data-select="sex"></span>
            </p>

            <p class="account-input mt-20 clearfix">
                <span>手机号</span>
                <span class="login-tel">
					<input type="text" name="phone" placeholder="请输入手机号"/>
				</span>
            </p>

            <p class="account-input mt-20 clearfix">
                <span>邮箱</span>
                <span class="login-tel">
					<input type="text" name="email" placeholder="请输入邮箱"/>
				</span>
            </p>
        </div>

        <div class="account-btn">
            <a href="javascript:" data-btn="submitBtn" class="btn-bg-blue m-r-md">提交</a>
            <a href="javascript:" data-btn="cancelBtn" class="btn-bg-gray">取消</a>
            <a href="javascript:" data-btn="updatePwdBtn" class="c-btn btn-blue"
               style="position: absolute;top:0;right:0">修改密码</a>
        </div>
    </form>

</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>

<script src="/admin/public/uploadFile.js"></script>

<script src="/admin/public/getIndexHead.js"></script>
<script src="/admin/public/updCurrUserPasswordDialog.js"></script>

<script>
    const $form = $('[data-form="account"]');
    const $uploadWidget = $form.find('[data-widget="upload"]');
    const $submitBtn = $form.find('[data-btn="submitBtn"]');
    const $cancelBtn = $form.find('[data-btn="cancelBtn"]');
    const $updPwdBtn = $form.find('[data-btn="updatePwdBtn"]');

    $cancelBtn.on("click", () => {
        history.back();
    })

    $updPwdBtn.on("click", () => {
        updCurrUserPasswordDialog();
    });

    $('[data-widget="indexHead"]').replaceWith(getIndexHead());

    const $sexSel = $.getSelect("sex", [
        {value: null, name: "请选择性别"},
        {value: 1, name: "男"},
        {value: 2, name: "女"},
    ])
    $sexSel.css({width: "100%", padding: 0, margin: 0});
    $sexSel.find("input").css({width: "545px"});

    $form.find('[data-select="sex"]').html($sexSel);
    uploadWidget($uploadWidget);

    getCurrUserInfo(({Code, Message, Result}) => {
        if (Code !== 10000) {
            return location.href = "/admin/login.html?" + $.param({
                msg: Message,
                back: location.href
            });
        }

        Object.keys(Result).forEach(key => {
            const val = Result[key] || null;
            if (!val) {
                return;
            }

            $form.find(`[name=${key}]`).val(val);

            if (key === 'sex') {
                $sexSel.find(`[data-value=${val}]`).click();
                return;
            }

            if (key === "avatarUrl") {
                $uploadWidget.append($(`<img src="${val}" alt="">`));
                $uploadWidget.children("span").hide();
            }

        });

        $submitBtn.on("click", () => {
            const data = $.getFormData($form);
            updCurrUserInfo(data, res => {
                if (res.Code !== 10000) {
                    return $.toast(res.Message);
                }
                return $.toast("编辑成功", 2000, () => {
                    location.reload();
                });
            });
        });

    })


    function uploadWidget($widget) {
        const $uploadBtn = $widget.children("span");
        if ($widget.find("img").attr("src")) {
            $uploadBtn.hide();
        }
        $widget.on("mouseover", () => {
            if ($widget.find("img").attr("src")) {
                $uploadBtn.show()
            }
        });
        $widget.on("mouseout", () => {
            if ($widget.find("img").attr("src")) {
                $uploadBtn.hide()
            }
        });

        $uploadBtn.on("click", () => {
            uploadFile({
                uploadApiUrl: "/File/uploadImage",
                maxCount: 1,
                maxSize: 1024,
                accept: "image/*",
                callback: res => {
                    if (res.Code !== 10000) {
                        return $.toast(res.Message);
                    }
                    const imgUrl = res.Result[0];
                    $widget.find("input").val(imgUrl);
                    const $img = $widget.find("img");
                    if ($img.length > 0) {
                        $img.attr("src", imgUrl);
                    } else {
                        $widget.append($(`<img src="${imgUrl}" alt="">`));
                    }
                    $uploadBtn.hide()
                }
            });
        });
    }

    function getCurrUserInfo(callback = Function()) {
        $.sApi({
            url: "/Login/getCurrUserInfo"
        }, callback)
    }

    function updCurrUserInfo(param, callback = Function()) {
        $.sApi({
            data: param,
            url: "/Login/updCurrUserInfo"
        }, callback)
    }

</script>

</body>
</html>